import React, { useState } from 'react'
import ResumeUpload from './index'
import { UploadTask } from '../../utils/resumeUpload'

// 使用示例组件
const ResumeUploadExample: React.FC = () => {
  const [uploadResults, setUploadResults] = useState<Array<{
    success: boolean
    url?: string
    error?: string
    fileName?: string
  }>>([])

  // 处理上传完成
  const handleUploadComplete = (results: Array<{
    success: boolean
    url?: string
    error?: string
    fileName?: string
  }>) => {
    setUploadResults(prev => [...prev, ...results])
    console.log('上传完成:', results)
  }

  // 处理上传进度
  const handleProgress = (fileIndex: number, task: UploadTask) => {
    console.log(`文件 ${fileIndex} 上传进度:`, {
      fileName: task.fileName,
      progress: task.progress,
      status: task.status,
      speed: task.completedParts > 0 ? 
        `${((task.completedParts / task.totalParts) * task.fileSize / ((Date.now() - task.startTime) / 1000)).toFixed(2)} bytes/s` : 
        '0 bytes/s'
    })
  }

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h1>断点续传上传示例</h1>
      
      <ResumeUpload
        maxFiles={5}
        accept="image/*"
        multiple={true}
        onUploadComplete={handleUploadComplete}
        onProgress={handleProgress}
        showTaskList={true}
        showUnfinishedTasks={true}
      />

      {/* 上传结果展示 */}
      {uploadResults.length > 0 && (
        <div style={{ marginTop: '20px' }}>
          <h3>上传结果</h3>
          <div style={{ 
            border: '1px solid #e8e8e8', 
            borderRadius: '8px', 
            padding: '16px',
            backgroundColor: '#fafafa'
          }}>
            {uploadResults.map((result, index) => (
              <div 
                key={index} 
                style={{ 
                  padding: '8px 0',
                  borderBottom: index < uploadResults.length - 1 ? '1px solid #f0f0f0' : 'none'
                }}
              >
                <div style={{ 
                  color: result.success ? '#52c41a' : '#ff4d4f',
                  fontWeight: '500'
                }}>
                  {result.success ? '✅' : '❌'} {result.fileName}
                </div>
                {result.url && (
                  <div style={{ fontSize: '12px', color: '#666', marginTop: '4px' }}>
                    URL: {result.url}
                  </div>
                )}
                {result.error && (
                  <div style={{ fontSize: '12px', color: '#ff4d4f', marginTop: '4px' }}>
                    错误: {result.error}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}

export default ResumeUploadExample
